<style type="text/css">
.center {
	text-align: center !important;
}

#history {
	color: black;
	font-family: Arial;
	font-size: 12px;
	line-height: 1;
}

.table tbody td {
	background: none repeat scroll 0 0 #FFFFFF !important;
}

.table th,.table td {
	border-top: 1px solid #DDDDDD !important;
	line-height: 20px;
	padding: 8px;
	text-align: left;
	vertical-align: top;
}

.table-striped tbody tr:nth-child(2n+1) td,.table-striped tbody tr:nth-child(2n+1) th
	{
	background-color: #F9F9F9 !important;
}

.table th {
	font-weight: bold !important;
}

.table-bordered th,.table-bordered td {
	border-left: 1px solid #DDDDDD !important;
}

.table,.with-head {
	border: none !important;
	margin-bottom: 1.667em;
}

.table-bordered {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-collapse: separate;
	border-color: #DDDDDD #DDDDDD #DDDDDD -moz-use-text-color !important;
	border-image: none !important;
	border-radius: 4px 4px 4px 4px !important;
	border-style: solid solid solid none !important;
	border-width: 1px 1px 1px 0 !important;
}

.table thead th,.table thead td,.head {
	background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF) repeat
		scroll 0 0 transparent !important;
	border-color: white #999999 #828282 #DDDDDD;
	border-style: none;
	border-width: 1px;
	color: black;
	text-shadow: none;
}
</style>
<div style="width: 98%">
	<div class="pie_chart_render" style="width: 60%; float: left"></div>

	<div id="history" style="width: 40%; float: right">
		{{if isset($view->other_statistics)}}
		<dl class="accordion" style="width: 90%; float: right">
			
			{{if isset($view->news_top_last)}} 
			<dt class="" id="opened">
				<span class="number">10</span>{{if isset($statistics_model)}}{{$statistics_model->localize_label("top_last_news")}}{{/if}}
			</dt>
			<dd style="display: block;">
					{{foreach $view->news_top_last as $k=>$item}}
						<p>{{$k+1}}. <a href="{{$item->get_link_details()}}">{{$item->title|truncate:40}}</a> ({{$item->created}})</p>
					{{/foreach}} 
			</dd>
			{{/if}}
			
			{{if isset($view->news_top_hits)}} 
			<dt class="">
				<span class="number">10</span>{{if isset($statistics_model)}}{{$statistics_model->localize_label("top_hit_news")}}{{/if}}
			</dt>
			<dd style="display: block;">				
					{{foreach $view->news_top_hits as $k=>$item}}
						<p>{{$k+1}}. <a href="{{$item->get_link_details()}}">{{$item->title|truncate:50}}</a> ({{$item->hits}})</p>
					{{/foreach}} 				
			</dd>
			{{/if}}
			
			{{if isset($view->online)}}
			<dt class="opened">
				<span class="number">{{$view->online['total']}}</span>{{if isset($statistics_model)}}{{$statistics_model->localize_label("user_online")}}{{/if}}
			</dt>
				{{if isset($view->online['children'])}}
						<dd style="display: block;">
						{{foreach $view->online['children'] as $k=>$item}}
							<p>{{$k+1}}. {{$item['user_name']}} ({{$item['ip_address']}}  {{$item['visiting']}})</p>
						{{/foreach}}
						</dd>
				{{/if}}
			{{/if}}
			
			{{foreach $view->other_statistics as $k=>$item}}
				<dt class="">
					<span class="number">{{$item['total']}}</span>{{$item['title']}}
				</dt>
			{{/foreach}}
		</dl>
		{{/if}}

	</div>

	<div class="bar_chart_render" style="width: 60%; float: left"></div>
	<div class="pie_chart_render" style="width: 60%; float: left"></div>

</div>
<script src="{{base_url()}}/data/jscripts/highcharts.js"
	type="text/javascript"></script>
<script type="text/javascript">
(function($){
	   var chartType = {
			pie_chart : {
	         chart: { type: 'pie' },
	         title: {},
	         tooltip: {
	        	    pointFormat: '{point.percentage} %',
	            	percentageDecimals: 2
	         },
	         plotOptions: {
	                pie: {
	                    allowPointSelect: true,
	                    cursor: 'pointer',
	                    dataLabels: {
	                        enabled: true,
	                        color: '#000000',
	                        connectorColor: '#000000',
	                        formatter: function() {
	                            return '<b>'+ this.point.name +'</b>: '+ this.y +' {{if isset($statistics_model)}}{{$statistics_model->localize_label("post")}}{{/if}}, '+ (this.point.percentage).toFixed(2)+ ' %';
	                        },
	                    },
	                }
	         },
	         xAxis: {},
	         yAxis: {},
	         series: []
	      },
	      
	      bar_chart : {
              chart: {type: 'bar'},
              title: {},
              xAxis: {},
              yAxis: {},
              legend: {
                  backgroundColor: '#FFFFFF',
                  reversed: true
              },
              tooltip: {
                  formatter: function() {
                      return ''+
                          this.series.name +': '+ this.y +'';
                  }
              },
              plotOptions: {
                  series: {
                      stacking: 'normal'
                  }
              },
             series: []
	      }
	   };
	   
	   var methods = {
	      init:
	         function (chartName, options) {
	            return this.each(function(i) {
	               optsThis = options[i];
	               chartType[chartName].chart.renderTo = this;
	               optsHighchart = $.extend (true, {}, chartType[chartName], optsThis);
	               new Highcharts.Chart (optsHighchart);
	            });
	         }
	   };
	   $.fn.cbhChart = function (action,objSettings) {
	      if ( chartType[action] ) {
	         return methods.init.apply( this, arguments );
	      } else if ( methods[action] ) {
	         return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
	      } else if ( typeof action === 'object' || !action ) {
	         $.error( 'Invalid arguments to plugin: jQuery.cbhChart' );
	      } else {
	         $.error( 'Action "' +  action + '" does not exist on jQuery.cbhChart' );
	      }
	   };
	})(jQuery);

	$(function(){
	   chart_news = {
	      title: { text: '{{if isset($statistics_model)}}{{$statistics_model->lang->line('news')}}{{/if}} {{if isset($view->total_news)}}{{$view->total_news}}{{/if}}' },
	      series: [{
	    	   data: {{if isset($view->series_data_news)}}{{$view->series_data_news}}{{/if}}
	      }]
	   };//tin tức theo danh mục
	   
	   chart_advertising = {
			      title: { text: '{{if isset($statistics_model)}}{{$statistics_model->lang->line("advertising")}}{{/if}} {{if isset($view->total_advertising)}}{{$view->total_advertising}}{{/if}}' },			      
		          xAxis: {
		                categories: [{{if isset($view->series_category_advertising)}}{{$view->series_category_advertising}}{{/if}}]
		          },
		          yAxis: {
		                min: 0,
		                title: {
		                    text: ''
		                }
		          },
			      series: [{{if isset($view->series_data_advertising_disable)}}{{$view->series_data_advertising_disable}}{{/if}},{{if isset($view->series_data_advertising_active)}}{{$view->series_data_advertising_active}}{{/if}}]
		};//vị trí quảng cáo
	   
	   chart_data = {
	         plotOptions: {
	                pie: {
	                    allowPointSelect: true,
	                    cursor: 'pointer',
	                    dataLabels: {
	                        enabled: true,
	                        color: '#000000',
	                        connectorColor: '#000000',
	                        formatter: function() {
	                            return '<b>'+ this.point.name +'</b>: '+ this.y +' files, '+ (this.point.percentage).toFixed(2)+ ' %';
	                        },
	                    },
	                }
	         },
		      title: { text: '{{if isset($statistics_model)}}{{$statistics_model->localize_label('data')}}{{/if}}  {{if isset($view->total_data)}}{{$view->total_data}}{{/if}}' },
		      series: [{
		    	   data: {{if isset($view->series_data_data)}}{{$view->series_data_data}}{{/if}}
		      }]
		};//dữ liệu theo kiểu dữ liệu
	   
	   pie_chart_array = [chart_news , chart_data];
  	   bar_chart_array = [chart_advertising];
	   $('.pie_chart_render').cbhChart('pie_chart', pie_chart_array);
	   $('.bar_chart_render').cbhChart('bar_chart', bar_chart_array);	   
	});
	$(function(){
		$("dt#opened").click();
	});
</script>